<!-- 
    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
        绘制三次贝塞尔曲线，
        cp1x,cp1y为控制点一，
        cp2x,cp2y为控制点二，
        x,y为结束点
 -->
<html>

<head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                //三次贝塞尔曲线
                ctx.beginPath();
                ctx.moveTo(75, 40);
                ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
                ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
                ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
                ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
                ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
                ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
                ctx.fill();
            }
        }
    </script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>

</html>